<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../../Vue_Origin/vue.js" type="text/javascript"></script> <!-- 开发使用的版本 -->
    <!-- <script src="../../Vue_Origin/vue.min.js" type="text/javascript"></script> // 生产使用的版本 -->

    <title>学习Vue的第五天</title>
</head>

<body>

    <!-- 创建容器 -->
    <div id="app">
        <h3>理解MVVM，Object.defineProperty</h3>
        <div style="padding: 10px 0px;">
            <h4>理解MVVM</h4><img src="../MVVM.png" alt="MVVM理解.png" srcset="">
        </div>
        <div id="model_id"><b>理解MVVM:此处为View,这个是Model中的值{{ model }}</b></div>
        <!--
            MVVM模型
                1.M: 模型(Model) : data中的数据
                2.V: 视图(view) :模板代码
                3.VM: 视图模型(ViewModel): Vue实例
            观察发现:
                1.data中所有的属性，最后都出现在了vm身上。
                2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
         -->
        <div id="model_id"><b>理解Object.defineProperty【ES6中的知识点】</b></div>

    </div>

    <script type="text/javascript">
        //关闭vue在启动时生成生产提示
        Vue.config.productionTip = false

        // 下面的整体为一个VM
        const vm = new Vue({
            el: '#model_id',

            data: {
                model: '这个时模型Model'
            }
        })

        // 理解Object.defineProperty
        let number = 18
        let person = {
            name: '张三',
            sex: '男',
        }
        // Object.defineProperties(person, 'age', { value: '18' })
        Object.defineProperty(person, 'age', {
            // value: '18', // 不可枚举【即无法通过遍历获取该值】 //TODO:思考该变量不可和下方的方法通知存在吗？？
            // enumerable: true, // 【使用该属性后，上方的变量value,可以通过遍历获取值，默认：false】
            // writable: true, // 控制属性是否可以被修改，默认值是false
            // configurable: true, // 控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get: function () {
                return number
            },

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性了')
                return number
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value) {
                console.log("有人修改了age属性，且值是", value)
                number = value
            }
        })

        console.log('person', person)
    </script>
</body>

</html>172.25.153.33